<template>
	<div class="bg-white dark:bg-zinc-900 xl:dark:bg-zinc-800 rounded pb-1">
		<div
			:style="{ backgroundColor: randomRGB() }"
			class="relative w-full rounded cursor-zoom-in group"
			@click="onToPinsClick"
		>
			<!-- 图片 -->
			<img
				ref="imgTarget"
				v-lazy
				class="w-full rounded bg-transparent"
				:style="{ height: (width / data.photoWidth) * data.photoHeight + 'px' }"
				:src="data.photo"
			/>

			<!-- 遮罩层 -->
			<div
				class="hidden opacity-0 w-full h-full bg-zinc-900/50 absolute top-0 left-0 rounded duration-300 group-hover:opacity-100 xl:block"
			>
				<!-- 分享 -->
				<m-button class="absolute top-1.5 left-1.5">分享</m-button>
				<!-- 点赞 -->
				<m-button
					class="absolute top-1.5 right-1.5"
					type="info"
					icon="heart"
					iconClass="fill-zinc-900 dark:fill-zinc-200"
				></m-button>
				<!-- 下载 -->
				<m-button
					class="absolute bottom-1.5 left-1.5 bg-zinc-100/70"
					type="info"
					icon="download"
					size="small"
					iconClass="fill-zinc-900 dark:fill-zinc-200"
					@click="onDownload"
				></m-button>
				<!-- 全屏 -->
				<m-button
					class="absolute bottom-1.5 right-1.5"
					type="info"
					icon="full"
					size="small"
					iconClass="fill-zinc-900 dark:fill-zinc-200"
					@click="toggleFullScreen"
				></m-button>
			</div>
		</div>

		<!-- 标题 -->
		<p class="text-sm mt-1 font-bold text-zinc-900 dark:text-zinc-300 px-1">
			{{ data.title }}
		</p>

		<!-- 作者信息 -->
		<div class="flex items-center mt-1 px-1">
			<img v-lazy class="h-2 w-2 rounded-full" :src="data.avatar" />
			<span class="text-sm text-zinc-500 ml-1">{{ data.author }}</span>
		</div>
	</div>
</template>

<script setup>
import { randomRGB } from '@/utils/color'
import { saveAs } from 'file-saver'
import { message } from '@/libs/index.js'
import { useElementBounding, useFullscreen } from '@vueuse/core'
import { ref, computed } from 'vue'

const props = defineProps({
	data: {
		type: Object,
		required: true,
	},
	width: {
		type: Number,
	},
})

const onDownload = () => {
	saveAs(props.data.photoDownLink)
	message('success', '下载成功')
}

const imgTarget = ref(null)
const { enter: toggleFullScreen } = useFullscreen(imgTarget)

const {
	x: imgX,
	y: imgY,
	width: imgW,
	height: imgH,
} = useElementBounding(imgTarget)
// 点击时记录图片中心点的位置
const imgContainCenter = computed(() => {
	return {
		translateX: parseInt(imgX.value + imgW.value / 2),
		translateY: parseInt(imgY.value + imgH.value / 2),
	}
})

const emits = defineEmits(['click'])
const onToPinsClick = () => {
	emits('click', {
		id: props.data.id,
		translateX: imgContainCenter.value.translateX,
		translateY: imgContainCenter.value.translateY,
	})
}
</script>

<style scoped lang="scss"></style>
